<template>
    <div class="xt-admin-menu-item" v-for="(menu, index) in leftMenu">
        <div  :class="{
            'item-warp': true, 
            'item-active': menu.path == route.fullPath,
            'item-left-line': menu.collapse && menu.children && menu.children.length > 0
        }" :style="{paddingLeft: (props.padding ? props.padding : 10) + 'px'}" @click="menuItemClick(menu)">
            <div class="label">
                <div class="icon" v-if="menu.icon"><el-icon><component :is="menu.icon" /></el-icon></div>
                <div class="title">{{ menu.label }}</div>
            </div>
            <el-icon style="font-size:12px" v-if="menu.children && menu.children.length > 0">
                <component :is="menu.collapse ? 'ArrowDownBold' : 'ArrowRightBold'" />
            </el-icon>
        </div>
        <transition name="fade">
            <div :class="{'xt-admin-children': true}" v-if="menu.collapse && menu.children && menu.children.length > 0">
                <xt-menu-item :menus="menu.children" :padding="(props.padding ? props.padding : 0) + 24"/>
            </div>
        </transition>
    </div>
</template>

<script setup>
    import XtMenuItem from './XtMenuItem.vue'
    import { useRouter, useRoute } from 'vue-router';

    import { computed, defineProps } from 'vue'
    import { openPage } from '@/utils/tabs'

    let router = useRouter();
    let route = useRoute();

    const props = defineProps({
        menus: Array,
        padding: {
            type: Number,
            default: 0
        },
    })

    const activePath = (menu) => {
        console.log('route', route)
        console.log('menu', menu)
    }

    const leftMenu = computed(()=>{
        let list = [];
        for(let i = 0; i < props['menus'].length; i ++) {
            let menu = props['menus'][i];
            if(menu.hideMenu) {
                continue
            }
            list.push(menu);
        }
        return list;
    })

    const menuItemClick = (menu) => {
        if(menu.children && menu.children.length > 0) {
            menu.collapse = !menu.collapse;
        }else {
            router.push(menu.path)
            openPage(menu.path);
        }
    }
</script>

<style lang="less" scoped>
.xt-admin-children {
    // padding-left: 24px;
}

.xt-admin-menu-item {
    .item-warp {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid #fff;
        padding-right: 10px;
        .label {
            height: 38px;
            display: flex;
            
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            .title {
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                margin-left: 10px;
                user-select: none;
            }
            .icon-menu {
                font-size: 20px;
            } 
        }
    }

    .item-warp:hover {
        cursor: pointer;
        background: #dfe9ff;
        border-left: 4px solid #4b83fc;
    }

    .item-active {
        color: #fff;
        color: #4b83fc;
        border-left: 4px solid #4b83fc;
        font-weight: bold;
        background: #dfe9ff;
    }
}

@keyframes fade-in {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.fade-enter-active {
    animation: fade-in 0.3s;
}

.fade-leave-active {
    animation: fade-in 0.3s reverse;
}
</style>
